<html>
    <head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.10.1/build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.10.1/build/cssreset/reset-min.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.10.1/build/cssbase/base-min.css">
<script type="text/javascript" src="../../../build/yui/yui.js"></script>

</head>
<body class="yui3-skin-sam">
    <div id="example"></div>
</body>

<script>
YUI({
    filter: 'raw',
    allowRollup: false,
    combine: false,
    useBrowserConsole: true
}).use("console", "test", "dump", "datatable","datatable-highlight", function(Y) {

    // Columns must match data object property names
    var data = [
        { id: "ga-3475", name: "gadget",   price: "$6.99", cost: "$5.99", cost: "$5.99", cost: "$5.99", cost: "$5.99", cost: "$5.99", cost: "$5.99", cost: "$5.99", cost: "$5.99"  },
        { id: "sp-9980", name: "sprocket", price: "$3.75", cost: "$3.25", cost: "$3.25", cost: "$3.25", cost: "$3.25", cost: "$3.25", cost: "$3.25", cost: "$3.25", cost: "$3.25"  },
        { id: "wi-0650", name: "widget",   price: "$4.25", cost: "$3.75", cost: "$3.75", cost: "$3.75", cost: "$3.75", cost: "$3.75", cost: "$3.75", cost: "$3.75", cost: "$3.75"  },
        { id: "ga-3474", name: "gadget",   price: "$6.99", cost: "$5.99", cost: "$5.99", cost: "$5.99", cost: "$5.99", cost: "$5.99", cost: "$5.99", cost: "$5.99", cost: "$5.99"  },
        { id: "sp-9985", name: "sprocket", price: "$3.75", cost: "$3.25", cost: "$3.25", cost: "$3.25", cost: "$3.25", cost: "$3.25", cost: "$3.25", cost: "$3.25", cost: "$3.25"  },
        { id: "wi-0660", name: "widget",   price: "$4.25", cost: "$3.75", cost: "$3.75", cost: "$3.75", cost: "$3.75", cost: "$3.75", cost: "$3.75", cost: "$3.75", cost: "$3.75"  },
        { id: "ga-3275", name: "gadget",   price: "$6.99", cost: "$5.99", cost: "$5.99", cost: "$5.99", cost: "$5.99", cost: "$5.99", cost: "$5.99", cost: "$5.99", cost: "$5.99"  },
        { id: "sp-1980", name: "sprocket", price: "$3.75", cost: "$3.25", cost: "$3.25", cost: "$3.25", cost: "$3.25", cost: "$3.25", cost: "$3.25", cost: "$3.25", cost: "$3.25"  },
        { id: "wi-1650", name: "widget",   price: "$4.25", cost: "$3.75", cost: "$3.75", cost: "$3.75", cost: "$3.75", cost: "$3.75", cost: "$3.75", cost: "$3.75", cost: "$3.75"  },
        { id: "ga-1474", name: "gadget",   price: "$6.99", cost: "$5.99", cost: "$5.99", cost: "$5.99", cost: "$5.99", cost: "$5.99", cost: "$5.99", cost: "$5.99", cost: "$5.99"  },
        { id: "sp-1985", name: "sprocket", price: "$3.75", cost: "$3.25", cost: "$3.25", cost: "$3.25", cost: "$3.25", cost: "$3.25", cost: "$3.25", cost: "$3.25", cost: "$3.25"  },
        { id: "wi-1660", name: "widget",   price: "$4.25", cost: "$3.75", cost: "$3.75", cost: "$3.75", cost: "$3.75", cost: "$3.75", cost: "$3.75", cost: "$3.75", cost: "$3.75"  }

    ];

    var table = new Y.DataTable({
        columns: ["id", "name", "price", "cost", "cost", "cost", "cost", "cost", "cost", "cost", "cost"],
        data: data,
        caption: "All The Colors!",
        summary: "Example DataTable showing basic instantiation configuration",

        highlightCols: false,
        highlightRows: false,
        highlightCells: true
    });

    table.render("#example");
});

</script>
</html>
